<template>
	<view class="content">

		<uni-list-item>
			<template v-slot:header>
				<view class="flexrowcenter" style="width: 100px;">
					<image class="red-marker" src="@/static/images/common/red-mark.png" />
					<text class="text-df  font-bold " style="width:80px;margin-left: 10px;">手机号</text>

				</view>
			</template>
			<template v-slot:body>
				<view class="flexrow">

					<view class="uni-input-wrapper">
						<uni-easyinput type="number" :inputBorder="false"    style="min-width:180px;" v-model="mobile" placeholder="请输入手机号" />
					</view>
				</view>
			</template>
		</uni-list-item>
		<uni-list-item>
			<template v-slot:header>
				<view class="flexrowcenter" style="width: 100px;">
					<image class="red-marker" src="@/static/images/common/red-mark.png" />
					<text class="text-df  font-bold " style="width:80px;margin-left: 10px;">验证码</text>

				</view>
			</template>
			<template v-slot:body>
        <view class="uni-input-wrapper flexrowcenter"  style="width:100px">
        <uni-easyinput type="number" style="width:100px;" v-model="messagecode" placeholder="请输入验证码" />
					</view>
			</template>
      <template v-slot:footer>
        <view  class="flexrowcenter margin-left-xl">
          <button :class="['padding-tb-sm',choose == false ? 'hasChosen':'notChosen']"
                  @tap.stop="sendMsg"
                  :disabled="choose">
            {{ choose ? clock + 's重新获取' : '获取验证码' }}
          </button>
        </view>
      </template>
		</uni-list-item>


		<view class="margin-lg padding-lr-xs">
			<view class="margin-lr-xs">
				<text class="text-df text-grey ">账户注销注意事项</text>
			</view>
			<view class="margin-tb-xs">
				<text class="text-sm text-grey ">1.账户注销前需要输入手机验证码确认</text>
			</view>
			<view class="margin-tb-xs">
				<text class="text-sm text-grey">2.账户注销后不会影响设备和建筑的数据，但是新注册将无法关联之前数据</text>
			</view>
		</view>
		<view class="button-container">
			<button type="primary"   :disabled="btndisabled"  class="button" @click="deleteAccount">确认注销</button>
		</view>
	</view>
</template>

<script>
  import { bannedUser } from "@/api/system/user"
  import {reg} from  '@/utils/common'
  import store from '@/store'
	export default {
		data() {
			return {
       	messagecode: null,
				mobile: null,
        clock: 60 ,// 倒计时
        choose:false,
			}
		},
		computed:{
			 btndisabled(){
         if(!this.messagecode){
           return true
         }else if(!this.mobile){
           return true
         }else{
           return false
         }
			 },
      id() {
        return this.$store.state.user.id
      },
		},
		methods: {
      setTime(){// 倒计时函数
        if(this.clock == 0){
          this.clock = 60
          this.choose = false
          return
        }else{
          this.clock--
          if(this.clock < 10){this.clock = '0'+this.clock}
        }
        setTimeout(() => { this.setTime() },1000)
      },
      sendMsg(){
        if(reg(this.mobile) ) {
          this.choose = true
          this.setTime()
          sendSmsCode({
            mobile: this.mobile,
            scene: 25   // BANNED_USER(25, "banned_user", "手机端 - 注销用户"),
          }).then(res => {
            uni.showToast({
              title: '发送成功'
            })
          })
        }
      },
			deleteAccount() {
        bannedUser({
          mobile: this.mobile,
          code: this.messagecode,
          id:this.id
        }).then(res=>{
          uni.showToast({title:'注销成功'})
          store.dispatch('LogOut').then(res => {
            uni.reLaunch({ url: '/pages/login' })
          })
        })
			}
		}
	}
</script>

<style scoped  lang="scss">
	.content {
		height: 100%;
		padding-bottom: calc(var(--window-bottom) + 20px);
		padding-top: 36rpx;
		padding: 15px;
		background-color: #ffffff;
	}
  .hasChosen{
    margin-left: 10px;
    background-color: #007aff;
    color: white;

    line-height: 14px;
    text-align: center;
    font-size: 12px;
  }
  .notChosen{
    background-color: #aeaeae;
    @extend .hasChosen;
  }
  .button-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		margin-bottom: 120rpx;
		height: 50px;
	}

	.button {
		flex: 1;
		margin-right: 10px;
		margin-left: 10px;

		height: 100%;
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		border-radius: 5px;

		color: #fff;


	}
</style>